<template>
	<view class="show-contact">
		<view class="contratc-header">
			<image src="https://fawn.xuexiluxian.cn/api/profile/wechat/bgimg/title.png" mode=""></image>
		</view>
		<scroll-view scroll-y="true" :style="'height: '+clintHeight+'px;'">
			<view class="contract" :style="'height: '+clintHeight+'px;'">
				<view class="contract-content">
					<view class="sign-item" v-for="(item,index) in classInfo" :key="index">
						<view class="sign-bg-title">
							<view class="itme-title">
								{{item.className}}
							</view>
						</view>
						<view class="item-content">
							<view class="item-text">
								<rich-text :nodes="item.classDesc"></rich-text>
							</view>
						</view>
						<view class="sign-bg-footer">
							<!-- <rich-text> 学习周期一个月 </rich-text> -->
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="know" @tap="goBack">
			<view class="contract-know">
				我知道了
			</view>
		</view>
	</view>
</template>

<script>
	import {getclassList} from '../../Service/class.js'
	export default {
		data() {
			return {
				clintHeight:null,
				classInfo:null
			}
		},
		onReday(){
			uni.getSystemInfo({
				success : (res)=> {
					// 获取头部的高度,获取页面节点
					let info = uni.createSelectorQuery().in(this).select('.contratc-header')
					//获取元素节点位置信息
					info.boundingClientRect((data)=>{
						//data包含元素高度宽度的信息 68是tabbar的高度
						this.clintHeight = res.windowHeight - data.height
						console.log(data)
					}).exec(function(res){
						//这个方法必须执行，不然获取不到数据的信息
					})
					// 获取底部的高度,获取页面节点
					let know = uni.createSelectorQuery().in(this).select('.know')
					//获取元素节点位置信息
					know.boundingClientRect((data)=>{
						//data包含元素高度宽度的信息 68是tabbar的高度
						this.clintHeight = this.clintHeight - data.height
						console.log(data)
					}).exec(function(res){
						//这个方法必须执行，不然获取不到数据的信息
					})
				}
			})
		},
		onLoad() {
			this._init()
		},
		methods:{
			// 请求数据
			async _init(){
				const data = {
					pageSize :this.pageSize,
					pageNum:this.pageNum
				}
				const res = await getclassList(data)
				console.log('res',res)
				this.classInfo = res
			},
			goBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped>
	scroll-view::-webkit-scrollbar{
		display: none;
		width: 0 !important;
		height: 0 !important;
		background: transplant;
	}
	.show-contact{
		width: 750rpx;
		height: 100%;
		padding-bottom: 200rpx;
		box-sizing: border-box;
		background: url('https://fawn.xuexiluxian.cn/api/profile/wechat/bgimg/sign-bg.png') no-repeat;
		background-size: 100% 100%;
	}
	.contratc-header{
		width: 100vw;
		height:300rpx;
		position: relative;
	}
	.contratc-header image{
		width: 622rpx;
		height: 93rpx;
		position: absolute;
		left: 10%;
		top: 150rpx;
		transform:rotateX(-50%);
	}
	.contract{
		width: 702rpx;
		padding: 0 24rpx;
		padding-bottom: 60rpx;
	}
	.sign-item{
		width: 702rpx;
		margin-bottom: 60rpx;
	}
	.sign-bg-title{
		width:702rpx;
		height: 100rpx;
		background: url('https://fawn.xuexiluxian.cn/api/profile/wechat/bgimg/sign-bg-title.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
	}
	.itme-title{
		position: absolute;
		top: 10rpx;
		left: 40%;
		transform: rotateX(-50%);
		font-size: 48rpx;
		line-height: 60rpx;
		font-weight: normal;
		color:#5d6fe5 ;
	}
	.item-content{
		width: 702rpx;
		height: 100%;
		background: url('https://fawn.xuexiluxian.cn/api/profile/wechat/bgimg/item-bg.png') no-repeat;
		position: relative;
		background-size: 100% 100%;
	}
	.sign-bg-footer{
		width: 702rpx;
		height: 100%;
		background: url('https://fawn.xuexiluxian.cn/api/profile/wechat/bgimg/sign-bg-footer.png') no-repeat;
		position: relative;
		background-size: 100% 100%;
	}
	.item-text{
		padding: 20rpx 40rpx;
		font-size: 30rpx;
		font-weight: 400;
		color:#5d6fe5 ;
	}
	.know{
		width: 100vm;
		height: 200rpx;
		position: relative;
	}
	.contract-know{
		width: 520rpx;
		height: 80rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #5D6FE5;
		text-align: center;
		line-height: 80rpx;
		background-color: #FFFFFF;
		position: absolute;
		left: 15%;
		top: 50%;
		transform: rotateX(-50%,-50%);
		border-radius: 20rpx;
	}
</style>
